<template>
  <div class="main-container">
    <el-form inline>
      <el-form-item>
        <el-date-picker v-model="searchMonth" type="month" value-format="yyyy-MM-dd" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query()">查询</el-button>
        <el-button type="primary" plain @click="exportExcel()">导出</el-button>
        <el-button type="primary" plain @click="exportExcelWithDetail()">导出(含明细)</el-button>
      </el-form-item>
    </el-form>
    <el-table border stripe :data="salaryData">
      <el-table-column label="序号" type="index" align="center" width="80"></el-table-column>
      <el-table-column prop="jobNumber" label="工号" align="center" width="100"></el-table-column>
      <el-table-column prop="workerName" label="姓名" align="center" width="100"></el-table-column>
      <el-table-column prop="processHour" label="产品工时" align="center" min-width="160"></el-table-column>
      <el-table-column prop="processPrice" label="工时工资" align="center" min-width="160"></el-table-column>
      <el-table-column prop="singleHour" label="日工工时" align="center" min-width="150"></el-table-column>
      <el-table-column prop="singleHourPrice" label="小时单价" align="center" min-width="150"></el-table-column>
      <el-table-column prop="singlePrice" label="日工工资" align="center" min-width="150"></el-table-column>
      <el-table-column prop="totalHour" label="总工时" align="center" min-width="140"></el-table-column>
      <el-table-column prop="totalPrice" label="总工资" align="center" min-width="140"></el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button type="text" @click="showDetail(scope.row)">查看明细</el-button>
          <el-tooltip v-if="scope.row.singleHourPriceChange" class="item" effect="dark" content="存在多个小时单价，显示最后一次审核确认" placement="left-start">
            <el-button type="text" icon="el-icon-warning" circle></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { getSalaryReport, exportSalaryReport } from '@/api/report'
import dayjs from 'dayjs'

@Component({
  components: {}
})
export default class SalaryReport extends Vue {
  searchMonth: any = ''
  salaryData: any = []

  created() {
    this.initSearchMonth()
    this.query()
  }

  private initSearchMonth() {
    // 判断路由来源
    const from = this.$route.params.from
    if (from == 'salary_summary') {
      const month = this.$route.params.month
      this.searchMonth = dayjs(new Date(month)).format('YYYY-MM-DD')
    } else {
      this.searchMonth = dayjs(new Date()).format('YYYY-MM-DD')
    }
  }

  async query() {
    let res = await getSalaryReport({ month: this.searchMonth })
    if (res) {
      this.salaryData = res.data
    }
  }

  showDetail(row) {
    // 跳转至工人工资详情报表页面 携带工人ID、查询时间范围参数 初始化数据查询渲染
    this.$router.push({
      name: 'menuA1ReportSalaryDetail',
      params: {
        from: 'salary-report',
        workerId: row.workerId,
        searchMonth: this.searchMonth
      }
    })
  }

  exportExcel() {
    window.open('/salary/report/export?' + 'today=' + this.searchMonth)
  }
  exportExcelWithDetail() {
    window.open('/salary/report/detail/export?' + 'today=' + this.searchMonth)
  }
}
</script>

<style></style>
